<template>
  <div>
    <el-steps :active="step" finish-status="success" simple style="margin-top: 20px">
      <el-step title="填写基本信息" />
      <el-step title="填写商品规格" />
      <el-step title="设置促销信息" />
    </el-steps>
    <br><br><br>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first" disabled>
        <goods v-if="step === 0" ref="goods" @saveAfter="saveAfter" />
      </el-tab-pane>
      <el-tab-pane label="商品规格" name="second" disabled>
        <standards v-if="step === 1" ref="standars" :category-id="categoryId" :goods-id="goodsId" />
      </el-tab-pane>
      <el-tab-pane label="销售价格" name="third" disabled />
    </el-tabs>
    <el-row>
      <el-col style="text-align: right;">
        <el-button size="mini" icon="el-icon-check" type="primary" @click="draft">草稿</el-button>
        <el-button size="mini" icon="el-icon-back" :disabled="step == 0" @click="before">上一步</el-button>
        <el-button size="mini" icon="el-icon-right" :disabled="step == 2" @click="after">下一步</el-button>
        <el-button size="mini" icon="el-icon-check" type="primary" @click="dataFormSubmit">完成</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import goods from './components/goods'
import standards from './components/standards'
export default {
  components: {
    goods,
    standards
  },
  data() {
    return {
      activeName: 'first',
      step: 0,
      goodsId: 1,
      categoryId: ''
    }
  },
  methods: {
    draft() {

    },
    before() {
      if (this.step > 0) {
        this.step -= 1
      }
      this.setTabDisable()
    },
    after() {
      const _this = this
      if (_this.step === 0) {
        _this.$refs.goods.dataFormSubmit().then(result => {
          if (result === true) {
            if (_this.step < 2) {
              _this.step = 1
              _this.activeName = 'second'
            }
          }
        })
      }
      this.setTabDisable()
    },
    saveAfter(data) {
      const _this = this
      _this.categoryId = data.categoryId
      _this.goodsId = data.goodsId
    },
    dataFormSubmit() {

    },
    setTabDisable() {
      if (this.step === 0) {
        this.activeName = 'first'
      } else if (this.step === 1) {
        this.activeName = 'second'
      } else if (this.step === 2) {
        this.activeName = 'third'
      }
    }
  }
}
</script>
